<template>
	<view>

		<view class="item" style="flex-direction: column;align-items: flex-end;" v-if="dataBean.approveStatusStr">
			<text
				style="color: #FFC000;font-size: 30rpx;margin: 20rpx 20rpx 10rpx 0;">{{dataBean.approveStatusStr|filterNull}}</text>
			<text v-if="dataBean.approveStatusRemark"
				style="color: #FF623D;font-size: 26rpx;margin: 0 20rpx 10rpx 0;">{{dataBean.approveStatusRemark|filterNull}}</text>
		</view>

		<remind-carinfo :dataBean="dataBean"></remind-carinfo>

		<view class="item" v-if="noadd!=1||dataBean.insuranceCompulsoryDto">

			<view style="display: inline-flex; height: 80rpx; justify-content: space-between; margin: 0 20rpx;">
				<u-icon name="order" color="#1573FF" label="交强险保单信息" label-color="#333333" :customStyle="{'line-height': '80rpx',}">
				</u-icon>

				<text style="line-height: 80rpx; color: #E93131;" v-if="dataBean.insuranceCompulsoryDto && dataBean.insuranceCompulsoryDto.daysRemainingStr">{{dataBean.insuranceCompulsoryDto.daysRemainingStr|filterNull}}</text>
				<text style="line-height: 80rpx; color: #1CC2F7;" v-else>{{dataBean && dataBean.insuranceCompulsoryDto ? getRemain(dataBean.insuranceCompulsoryDto.compulsoryEndTime):''}}</text>
			</view>

			<u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>

			<view v-if="dataBean.insuranceCompulsoryDto">
				<view class="text-line">
					<text class="text-name">交强险开始时间:</text>
					<text class="text-value">{{dataBean.insuranceCompulsoryDto.compulsoryStartTime|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">交强险结束时间:</text>
					<text class="text-value">{{dataBean.insuranceCompulsoryDto.compulsoryEndTime|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">交强险保单号:</text>
					<text class="text-value">{{dataBean.insuranceCompulsoryDto.compulsoryNo|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">保险公司:</text>
					<text class="text-value">{{dataBean.insuranceCompulsoryDto.compulsoryCompany|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">费用:</text>
					<text class="text-value">{{dataBean.insuranceCompulsoryDto.compulsoryAmount|filterNull}}</text>
				</view>
				<view class="text-line">
					<text class="text-name">分期:</text>
					<text class="text-value">{{dataBean.insuranceCompulsoryDto.compulsoryFeePeriods|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">备注:</text>
					<text class="text-value">{{dataBean.insuranceCompulsoryDto.compulsoryRemark|filterNull}}</text>
				</view>

				<picPdf v-if="dataBean.insuranceCompulsoryDto && dataBean.insuranceCompulsoryDto.compulsorySysAccessoryList && dataBean.insuranceCompulsoryDto.compulsorySysAccessoryList.length>0" :attachment="dataBean.insuranceCompulsoryDto.compulsorySysAccessoryList"></picPdf>
				<u-form  label-width="auto">
					<u-collapse>
						<u-collapse-item :title="item.title" v-for="(item, index) in dataBean.insuranceCompulsoryDto.compulsoryInstallmentPlan" :key="index">
						<u-form-item label="账单类型" borderBottom>
							<u-input v-model="item.feeName" border="none" inputAlign="right"  disabled></u-input>
						</u-form-item>
						<u-form-item label="应付金额/元" borderBottom>
							<u-input v-model="item.payableAmount" border="none" disabled inputAlign="right" placeholder="请输入" ></u-input>
						</u-form-item>
						<u-form-item label="应付日期" borderBottom >
							<u-input
							v-model="item.payableTime"
							disabled disabledColor="#ffffff" border="none"
							inputAlign="right" 
							placeholder="请选择" 
							></u-input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="备注" borderBottom>
							<u-input v-model="item.remark" border="none" inputAlign="right" disabled placeholder="请输入" type="textarea"></u-input>
						</u-form-item>
						<u-form-item label="生成应付账单" borderBottom>
							<u-switch v-model="item.isGenerateBill" slot="right" disabled></u-switch>	
						</u-form-item>
						
						</u-collapse-item>
					</u-collapse>
				</u-form>	
			</view>

			<no-data v-else content="暂无交强险~"></no-data>


			<u-line color="#efefef" border-style="dashed" :customStyle="{'display': 'block',}" v-if="dataBean.insuranceButton">
			</u-line>

			<view class="btn-detail" v-if="dataBean.insuranceButton && noadd!=1" @click="goAddForce">
				续 保
			</view>

		</view>

		<view class="item" v-if="noadd!=1||dataBean.insuranceCarrierDto">

			<view style="display: inline-flex; height: 80rpx; justify-content: space-between; margin: 0 20rpx;">
				<u-icon name="order" color="#1573FF" label="承运险保单信息" label-color="#333333" :customStyle="{'line-height': '80rpx',}">
				</u-icon>

				<text style="line-height: 80rpx; color: #E93131;" v-if="dataBean.insuranceCarrierDto && dataBean.insuranceCarrierDto.daysRemainingStr">{{dataBean.insuranceCarrierDto.daysRemainingStr|filterNull}}</text>
				<text style="line-height: 80rpx; color: #1CC2F7;" v-else>{{dataBean&&dataBean.insuranceCarrierDto? getRemain(dataBean.insuranceCarrierDto.carrierEndTime):''}}</text>
			</view>

			<u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>

			<view v-if="dataBean.insuranceCarrierDto">
				<view class="text-line">
					<text class="text-name">承运险开始时间:</text>
					<text class="text-value">{{dataBean.insuranceCarrierDto.carrierStartTime|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">承运险结束时间:</text>
					<text class="text-value">{{dataBean.insuranceCarrierDto.carrierEndTime|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">承运险保单号:</text>
					<text class="text-value">{{dataBean.insuranceCarrierDto.carrierNo|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">保险公司:</text>
					<text class="text-value">{{dataBean.insuranceCarrierDto.carrierCompany|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">费用:</text>
					<text class="text-value">{{dataBean.insuranceCarrierDto.carrierAmount|filterNull}}</text>
				</view>
				<view class="text-line">
					<text class="text-name">分期:</text>
					<text class="text-value">{{dataBean.insuranceCarrierDto.carrierFeePeriods|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">备注:</text>
					<text class="text-value">{{dataBean.insuranceCarrierDto.carrierRemark|filterNull}}</text>
				</view>

				<picPdf v-if="dataBean.insuranceCarrierDto && dataBean.insuranceCarrierDto.carrierSysAccessoryList && dataBean.insuranceCarrierDto.carrierSysAccessoryList.length>0" :attachment="dataBean.insuranceCarrierDto.carrierSysAccessoryList"></picPdf>
				<u-form  label-width="auto">
					<u-collapse>
						<u-collapse-item :title="item.title" v-for="(item, index) in dataBean.insuranceCarrierDto.carrierInstallmentPlan" :key="index">
						<u-form-item label="账单类型" borderBottom>
							<u-input v-model="item.feeName" border="none" inputAlign="right"  disabled></u-input>
						</u-form-item>
						<u-form-item label="应付金额/元" borderBottom>
							<u-input v-model="item.payableAmount" border="none" disabled inputAlign="right" placeholder="请输入" ></u-input>
						</u-form-item>
						<u-form-item label="应付日期" borderBottom >
							<u-input
							v-model="item.payableTime"
							disabled disabledColor="#ffffff" border="none"
							inputAlign="right" 
							placeholder="请选择" 
							></u-input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="备注" borderBottom>
							<u-input v-model="item.remark" border="none" inputAlign="right" disabled placeholder="请输入" type="textarea"></u-input>
						</u-form-item>
						<u-form-item label="生成应付账单" borderBottom>
							<u-switch v-model="item.isGenerateBill" slot="right" disabled></u-switch>	
						</u-form-item>
						
						</u-collapse-item>
					</u-collapse>
				</u-form>
				
			</view>

			<no-data v-else content="暂无承运险~"></no-data>


			<u-line color="#efefef" border-style="dashed" :customStyle="{'display': 'block',}" v-if="dataBean.insuranceButton">
			</u-line>

			<view class="btn-detail" v-if="dataBean.insuranceButton && noadd!=1" @click="goAddTrans">
				续 保
			</view>

		</view>

		<view class="item" v-if="noadd!=1||dataBean.insuranceCommercialDto">

			<view style="display: inline-flex; height: 80rpx; justify-content: space-between; margin: 0 20rpx;">
				<u-icon name="order" color="#1573FF" label="商业险保单信息" label-color="#333333"  :customStyle="{'line-height': '80rpx',}">
				</u-icon>

				<text style="line-height: 80rpx; color: #E93131;" v-if="dataBean.insuranceCommercialDto && dataBean.insuranceCommercialDto.daysRemainingStr">{{dataBean.insuranceCommercialDto.daysRemainingStr|filterNull}}</text>
        <text style="line-height: 80rpx; color: #1CC2F7;" v-else>{{dataBean && dataBean.insuranceCommercialDto ? getRemain(dataBean.insuranceCommercialDto.commercialEndTime):''}}</text>

      </view>

			<u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>

			<view v-if="dataBean.insuranceCommercialDto">

				<view class="text-line">
					<text class="text-name">商业险开始时间:</text>
					<text class="text-value">{{dataBean.insuranceCommercialDto.commercialStartTime|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">商业险结束时间:</text>
					<text class="text-value">{{dataBean.insuranceCommercialDto.commercialEndTime|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">商业险保单号:</text>
					<text class="text-value">{{dataBean.insuranceCommercialDto.commercialNo|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">保险公司:</text>
					<text class="text-value">{{dataBean.insuranceCommercialDto.commercialCompany|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">费用:</text>
					<text class="text-value">{{dataBean.insuranceCommercialDto.commercialAmount|filterNull}}</text>
				</view>
				<view class="text-line">
					<text class="text-name">分期:</text>
					<text class="text-value">{{dataBean.insuranceCommercialDto.commercialFeePeriods|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">备注:</text>
					<text class="text-value">{{dataBean.insuranceCommercialDto.commercialRemark|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">商业险种/保额/保费:</text>
					<text
						class="text-value" style="word-break: break-all">
						{{dataBean.insuranceCommercialDto.commercialInsuranceRecordList[0].commercialInsuranceName|filterNull}}{{'/'}}{{dataBean.insuranceCommercialDto.commercialInsuranceRecordList[0].amountInsured|filterNull}}{{'/'}}{{dataBean.insuranceCommercialDto.commercialInsuranceRecordList[0].insuranceExpenses|filterNull}}</text>
				</view>

				<picPdf v-if="dataBean.insuranceCommercialDto && dataBean.insuranceCommercialDto.commercialSysAccessoryList && dataBean.insuranceCommercialDto.commercialSysAccessoryList.length>0" :attachment="dataBean.insuranceCommercialDto.commercialSysAccessoryList"></picPdf>
				<u-form  label-width="auto">
					<u-collapse>
						<u-collapse-item :title="item.title" v-for="(item, index) in dataBean.insuranceCommercialDto.commercialInstallmentPlan" :key="index">
						<u-form-item label="账单类型" borderBottom>
							<u-input v-model="item.feeName" border="none" inputAlign="right"  disabled></u-input>
						</u-form-item>
						<u-form-item label="应付金额/元" borderBottom>
							<u-input v-model="item.payableAmount" border="none" disabled inputAlign="right" placeholder="请输入" ></u-input>
						</u-form-item>
						<u-form-item label="应付日期" borderBottom >
							<u-input
							v-model="item.payableTime"
							disabled disabledColor="#ffffff" border="none"
							inputAlign="right" 
							placeholder="请选择" 
							></u-input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="备注" borderBottom>
							<u-input v-model="item.remark" border="none" inputAlign="right" disabled placeholder="请输入" type="textarea"></u-input>
						</u-form-item>
						<u-form-item label="生成应付账单" borderBottom>
							<u-switch v-model="item.isGenerateBill" slot="right" disabled></u-switch>	
						</u-form-item>
						
						</u-collapse-item>
					</u-collapse>
				</u-form>
				

			</view>

			<no-data v-else content="暂无商业险~"></no-data>

			<u-line color="#efefef" border-style="dashed" :customStyle="{'display': 'block',}" v-if="dataBean.insuranceButton">
			</u-line>

			<view class="btn-detail" v-if="dataBean.insuranceButton && noadd!=1" @click="goAddCommer">
				续 保
			</view>

		</view>

		<examflow :from="pageType" :instanceId="instanceId" approvalName="carInsuranceApprove" :isAdd="false"></examflow>

		<view style="height: 100rpx;"></view>

		<view class="button-container" v-if="'myexam'==pageType">
			<button class="btn-item" @click="bottomClick(2)">审核驳回</button>
			<button class="btn-item" @click="bottomClick(3)">审核通过</button>
		</view>

	</view>
</template>

<script>
	import remindCarinfo from '../../components/remind-carinfo.vue';
	import examflow from '@/components/exam-flow.vue';
	import picPdf from '@/components/pic-pdf.vue';
	import {
		insurance_handle
	} from '@/common/http.api.js';

	export default {
		components: {
			remindCarinfo,
			examflow,
			picPdf
		},

		data() {
			return {
				dataBean: {
					insuranceCommercialDto:{
						commercialSysAccessoryList:[]
					},
					insuranceCompulsoryDto:{
						compulsorySysAccessoryList:[]
					},
          insuranceCarrierDto:{
            carrierSysAccessoryList:[]
					},
					vehicle:{
					},
					orderCar:{},
				},
				id:'',
				instanceId:'',
				businessId:'',
				approveId:'',
				componentId:'',
				pageType:'',
        noadd:''
			}
		},
		methods: {

      getRemain(datestr){
        if(uni.$u.test.isEmpty(datestr)){
          return ''
        }

        let cDate = new Date()

        let tDate = new Date(datestr)

        let timeDiff = tDate.getTime()-cDate.getTime()
        let remaindays = Math.ceil(timeDiff/(1000*3600*24))

        return remaindays>0?`剩余${remaindays}天`:'--'
      },

			goAddForce() {

				let intentData = JSON.stringify(this.dataBean);

				uni.navigateTo({
					url: '../addInsurance/addInsurance?pageType=add&type=1&intentData=' + intentData
				})
			},
			goAddTrans() {

				let intentData = JSON.stringify(this.dataBean);
				uni.navigateTo({
					url: '../addInsurance/addInsurance?pageType=add&type=3&intentData=' + intentData
				})
			},
			goAddCommer() {
				let intentData = JSON.stringify(this.dataBean);

				uni.navigateTo({
					url: '../addInsurance/addInsurance?pageType=add&type=2&intentData=' + intentData

				})
			},

			bottomClick(type) {
				switch (type) {
					case 2: //审核驳回
						uni.redirectTo({
							url: '/pagesA/exam/exam-flow?type=3&processKey=carInsuranceApprove&approveId=' + this
								.approveId + '&url=' + insurance_handle
						})
						break;
					case 3: //审核通过
						uni.redirectTo({
							url: '/pagesA/exam/exam-flow?type=4&processKey=carInsuranceApprove&approveId=' + this
								.approveId + '&url=' + insurance_handle
						})
						break;
				}

			},
		},
		watch:{
			'dataBean.insuranceCommercialDto.commercialInstallmentPlan':{
				deep:true,
				handler(val){
					this.dataBean.insuranceCommercialDto.commercialInstallmentPlan = val
				}
			},
			'dataBean.insuranceCarrierDto.carrierInstallmentPlan':{
				deep:true,
				handler(val){
					this.dataBean.insuranceCarrierDto.carrierInstallmentPlan = val
				}
			},
			'dataBean.insuranceCompulsoryDto.compulsoryInstallmentPlan':{
				deep:true,
				handler(val){
					this.dataBean.insuranceCompulsoryDto.compulsoryInstallmentPlan = val
				}
			},
		},
		onLoad(op) {

			this.id = !uni.$u.test.isEmpty(op.id)?op.id:'';
			this.instanceId = !uni.$u.test.isEmpty(op.instanceId)?op.instanceId:'';
			this.businessId = !uni.$u.test.isEmpty(op.businessId)?op.businessId:'';
			this.approveId = !uni.$u.test.isEmpty(op.approveId)?op.approveId:'';
			this.componentId = !uni.$u.test.isEmpty(op.componentId)?op.componentId:'';
			this.pageType = !uni.$u.test.isEmpty(op.pageType)?op.pageType:'';
			this.noadd = !uni.$u.test.isEmpty(op.noadd)?op.noadd:'';

		},
		onShow() {
			this.$u.api.insuranceDetail({
				carId: this.id,
				businessId:this.businessId,
        operationType:this.noadd==1?'insuranceSP':null
				// componentId: op.componentId >= 0 ? op.componentId : null
			}).then(
				res => {
					// if (res.code == 1) {

						// for (let prop in res.data) {
						// 	if(prop instanceof Object){
						// 		//不知道这样写为啥不生效
						// 		for(let child in prop){
						// 			if (!prop[child]) {
						// 				prop[child] = '--'
						// 			}
						// 		}
						// 	}else{
						// 		if (!res.data[prop]) {
						// 			res.data[prop] = '--'
						// 		}
						// 	}
						// }

						console.log(res,11111111111)
						let data = JSON.parse(JSON.stringify(res))
						data.insuranceCompulsoryDto.compulsoryInstallmentPlan.map((item)=>{
							if(item.isGenerateBill==1){
								this.$set(item,'isGenerateBill',true)
							}else{
								this.$set(item,'isGenerateBill',false)
							}
						})
						data.insuranceCarrierDto.carrierInstallmentPlan.map((item)=>{
							if(item.isGenerateBill==1){
								this.$set(item,'isGenerateBill',true)
							}else{
								this.$set(item,'isGenerateBill',false)
							}
						})
						data.insuranceCompulsoryDto.compulsoryInstallmentPlan.map((item)=>{
							if(item.isGenerateBill==1){
								this.$set(item,'isGenerateBill',true)
							}else{
								this.$set(item,'isGenerateBill',false)
							}
						})
						this.dataBean = data;

            if(res && res.instanceId){
              this.instanceId = res.instanceId
            }
					// }
				}

			);
		}
	}
</script>

<style lang="scss">

	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $blue15;
		font-size: 26rpx;
		line-height: 60rpx;
		align-self: flex-end;
		margin: 10rpx 20rpx 10rpx;
	}

	.nodata {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image {
			width: 200rpx;
			height: 100rpx;
		}

		text {
			margin-top: 35rpx;
			margin-bottom: 60rpx;
			font-size: 24rpx;
			color: #C5D3E8;
		}
	}
</style>
